<template>
  <div class="app-cont">
    <!--这是 Header 区域 -->
    <!--<div class="header">-->
      <!--<mt-header title="个人信息" class="mt-header">-->
        <!--<router-link to="/myHomeFX" slot="left">-->
          <!--<mt-button icon="back">返回</mt-button>-->
        <!--</router-link>-->
        <!--<mt-button icon="more" slot="Sright"></mt-button>-->
      <!--</mt-header>-->
    <!--</div>-->
    <div class="main">
      <div class="main-container">
        <div class="fenlei">
          <div class="yi">
            <div id="demo">
              <!-- 遮罩层 -->
              <div class="container" v-show="panel">
                <div>
                  <img id="image" :src="url" alt="Picture">
                </div>
                <button type="button" id="button" @click="crop">确定</button>
              </div>
              <div style="padding:20px;">
                <div class="tx">我的头像</div>
                <div class="show">
                  <img :src="url" class="picture">
                  <input type="file" id="change" accept="image" @change="change">

                </div>
              </div>
            </div>
            <!-- <mt-field type="number" label="我的头像" readonly disabled>
               <div class="mint-field-other"><img :src=userInfo.headImg alt="">
               </div>
             </mt-field>-->
          </div>
          <div class="er">
            <mt-field type="text" label="会员名">
              <div class="mint-cell-value"><input type="text" class="mint-field-core huiyuan" v-model="userInfo.nickName">
                <div class="mint-field-other">&gt;</div>
              </div>
            </mt-field>
            <a @click.natvie="isshow=!isshow" class="xuanze">性别 <span>{{userInfo.gender === 1 ? "男" : "女"}} &nbsp &nbsp &gt</span></a>
            <mt-field label="生日" placeholder="请输入生日" type="date" v-model="userInfo.birthday" class="birthday"
                      disableClear>&gt
            </mt-field>
          </div>
          <div class="san">

            <p @click="code">
              我的二维码
              <img src="../assets/images/shops/erweima.png" alt="">
            </p>
            <p @click="ModifyPhone">修改手机<span>{{userInfo.mobile}}</span></p>
            <p @click="ModifyPwd">修改密码<span>&gt</span></p>
          </div>

          <div class="si">
            <p @click="FaPiao">发票管理<span>&gt</span></p>
          </div>
          <mt-picker :slots="slots" @change="onValuesChange" v-show="isshow" v-model="userInfo.gender"></mt-picker>
          <a href="javascript:;" class="btn-next" @click="setDate">保存</a>
        </div>
      </div>
    </div>
    <!--遮罩层-->
    <div class="zhezhao" v-if='zhezhao1' @click="zzceng1()">
      <div class="wenzi">
              <span class="wenzi">
              长按图片，点击"发送给好友"<br>
              扫码即刻关注店铺
            </span>
      </div>
      <div class="zzc1_content" v-if="zzc1">
        <div class="content">
          <img :src="url" alt="" class="content-img">
          <p>{{userInfo.nickName}}</p>
          <p>更多优惠,等你来拼!</p>
          <canvas class="tupian" id="canvas">
            <!--<img id="canvas" src="./../assets/images/shops/erweima.png" alt="">-->
          </canvas>
          <p>记得邀请好友参与，拼单更快哦！</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  /* eslint-disable semi */
  import Vue from 'vue'
  import QRCode from 'qrcode'
  import Cropper from 'cropperjs'
  import {get_joinQrcode} from '../components/httpUtil/httpUtil'
  import {relogin} from "../components/httpUtil/httpUtil";

  Vue.use(QRCode)
  export default {
    name: 'Invitation',
    data () {
      return {
//        userInformation: {},
        headerImage: '',
        picValue: '',
        cropper: '',
        croppable: false,
        panel: false,
        url: JSON.parse(window.localStorage.data).headImg,
        zhezhao1:JSON.parse(window.localStorage.zhezhao1),
        zzc1:JSON.parse(window.localStorage.zzc1),
        checked: false,
        userInfo: {}, // 请求到的数据
//        shopUrl: window.localStorage.shopUrl,
        personUrl: 'http://www.yihangyoupin.com/dist/#/shopSet',
        isshow: false,
        value: '',
        showAlert:false,
        alertText:null,
        slots: [
          {
            values: ['女', '男']
          }
        ]
      }
    },
    mounted () {
      console.log(this.zhezhao1===false)
      this.userInfo = JSON.parse(window.localStorage.data)
      console.log(this.userInfo.gender)
      //初始化这个裁剪框
      var self = this;
      var image = document.getElementById('image');
      this.cropper = new Cropper(image, {
        aspectRatio: 1,
        viewMode: 1,
        background: false,
        zoomable: false,
        ready: function () {
          self.croppable = true;
        }
      });
    },
    methods: {
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go(){
        this.showAlert =false
      },
      getObjectURL (file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
          url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file);
        }
        return url;

      },
      change (e) {
        let files = e.target.files || e.dataTransfer.files;
        if (!files.length) return;
        this.panel = true;
        this.picValue = files[0];

        this.url = this.getObjectURL(this.picValue);
        //每次替换图片要重新得到新的url
        if (this.cropper) {
          this.cropper.replace(this.url);
        }
        this.panel = true;

      },
      crop () {
        this.panel = false;
        var croppedCanvas;
        var roundedCanvas;

        if (!this.croppable) {
          return;
        }
        // Crop
        croppedCanvas = this.cropper.getCroppedCanvas();
        console.log(this.cropper)
        // Round
        roundedCanvas = this.getRoundedCanvas(croppedCanvas);

        this.headerImage = roundedCanvas.toDataURL();
        this.postImg()
        console.log(this.headerImage)

      },
      getRoundedCanvas (sourceCanvas) {

        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        var width = sourceCanvas.width;
        var height = sourceCanvas.height;

        canvas.width = width;
        canvas.height = height;

        context.imageSmoothingEnabled = true;
        context.drawImage(sourceCanvas, 0, 0, width, height);
        context.globalCompositeOperation = 'destination-in';
        context.beginPath();
        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
        context.fill();

        return canvas;
      },
      postImg () {
        const jsonValue = JSON.stringify({
          "c": "10047",
          "p": {
            "userId": JSON.parse(window.localStorage.data).id,
            "tokenId": token(),
            "img": this.headerImage

          }
        });
        this.$http.post('http://www.yihangyoupin.com/qqs.us', jsonValue).then((res) => {
          this.url = res.data.p.headImg;
          window.localStorage.url = this.url
        })

      },
      // 二维码
      useqrcode(){
//        console.log(this.shopUrl)
        let canvas = document.getElementById('canvas')
        let canvs = QRCode.toCanvas(canvas, get_joinQrcode(), function (error) {
          if (error) console.error(error)
          console.log('success!');
        })
      },
      // 发送数据
      setDate(){
        const jsonValue = JSON.stringify({
          'c': '10029',
          'p': {
            'userId': JSON.parse(window.localStorage.data).id,  // 帐号
            'tokenId': token(),
            'gender': this.userInfo.gender,  //性别：0:女  1:男
            'mobile': this.userInfo.mobile,// 联系电话
            'nickName': this.userInfo.nickName,// 昵称
            'birthday': this.userInfo.birthday,// 出生日期
            'headImg': this.url
          }
        })
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res)
          if (res.data.p.isTrue) {
//            window.localStorage.data = JSON.stringify(res.data.p.userInfo)
//            this.userInfo=JSON.parse(res.data.p.userInfo)
//            this.userInfo=res.data.p.userInfo
            this.$router.push({name: 'myHomeFX', params: {}})
          } else {
            this.alertTip(res.data.p.errorMsg);
            if (res.data.p.errorCode === 90) {
              this.go= ()=> {
                this.showAlert = false
                let _this = this
                relogin(_this)
              }
            }
          }
        })
      },

      onValuesChange(picker, values) {
        this.value = values[0];
        this.userInfo.gender = this.value == '女' ? 0 : 1
        console.log(this.value)
        console.log(this.userInfo.gender)
        setTimeout(() => {
          this.isshow = false
        }, 500)
      },
      ischecked () {
        this.checked = true
      },
      ModifyPwd () {
        this.$router.replace({name: 'newPassword'})
      },
      code () {
        this.zhezhao1 = true;
        this.zzc1 = true;
      },
      zzceng1 () {
        // 点击遮罩层关闭
        this.zhezhao1 = false;
        this.zzc1 = false;
      },
      ModifyPhone () {
        this.$router.push({name: 'ModifyPhone'})
      },
      FaPiao () {
        this.$router.push({name: 'bill'})
      }

//      银行卡
//      card () {
//        this.$router.push({name: 'card'})
//      }

    },
    created () {
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
    },
    updated () {
      this.useqrcode()
    },
    destroyed () {
      window.localStorage.zhezhao1 = false;
      window.localStorage.zzc1 = false;
    }
  }
</script>
<style lang="scss" scoped>
  .btn-next {
    position: fixed;
    bottom: 20px;
    left:50%;
    transform: translate(-50%);
    background-color: #fff;
    display: block;
    margin: 0 auto 0;
    width: 580px;
    height: 74px;
    border-radius: 35px;
    border: 1px solid #fe3519;
    color: #fe3519;
    text-align: center;
    line-height: 74px;
    font-size: 26px;
  }
  .app-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /*padding: 80px 0 0;*/
    box-sizing: border-box;
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
    }
    .main {
      flex: 1;
      position: relative;
      .main-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }
    }
  }

  .fenlei {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    ::-webkit-scrollbar {
      display: none;
    }
  }

  /*立即参团遮罩层*/
  .zhezhao {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 20000;
    position: fixed;
    top: 0px;
  }

  .zhezhao .zzc1_content, .zzc2_content {
    width: 500px;
    height: 240px;
    background: #fff;
    position: absolute;
    top: 260px;
    /*right: 78px;*/
    left: 50%;
    transform: translate(-50%, 0); /*左边50%，再平移自身的-50%*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
  }

  .zhezhao .wenzi {
    width: 400px;
    height: 116px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 80px;
    text-align: center;
  }

  .zhezhao .wenzi > span {
    font-size: 28px;
    color: #ffc731;
    text-align: center;
  }

  .zhezhao .zzc1_content {
    width: 490px;
    height: 604px;
    box-sizing: border-box;
    padding: 30px;
    background: linear-gradient(#f38571, #f1543e);
  }

  .zhezhao .zzc1_content .content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 38px 30px;
    border-radius: 8px;
  }

  .zhezhao .zzc1_content .content .content-img {
    float: left;
    width: 80px;
    height: 80px;
    margin-right: 20px;
    border-radius: 50%;
  }

  .zhezhao .zzc1_content .content p:nth-child(2) {
    width: 230px;
    float: left;
    font-size: 28px;
    color: #454343;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .zhezhao .zzc1_content .content p:nth-child(3) {
    margin-top: 6px;
    width: 232px;
    float: left;
    font-size: 20px;
    color: #a1a1a1;
  }

  .zhezhao .zzc1_content .content p:last-child {
    width: 100%;
    font-size: 22px;
    color: #fe3519;
    text-align: center;
  }

  .zhezhao .zzc1_content .content .tupian{
    width: 307px!important;
    height: 307px!important;
    margin:0 auto 0 !important;
    margin-left: 30px !important;
    border: none;
  }
  #canvas{
    width: 307px!important;
    height: 307px!important;
    margin:0 auto 0 !important;
    margin-left: 30px !important;
    border: none;
  }
  .sixs{
    width: 100%;
    p{
      width: 100%;
      height: 80px;
      text-align: center;
      line-height: 80px;
      font-size: 28px;
    }
    .nan{
      border-bottom: 2px solid #f4f4f4;
    }
  }
  .xuanze{
    display: block;
    background-color: #fff;
    line-height: 94px;
    padding-left: 36px;
    padding-right: 36px;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
    border-top: 2px solid #f4f4f4;
    /*margin-top: 20px;*/
    width: 100%;
    height: 94px;
    font-size: 26px;
    color: #000;
    > span {
      float: right;
    }
  }
</style>
<style lang="scss">
  .huiyuan{
    margin-right: 20px !important;
  }
  .picker-slot-wrapper{
    width: 620px;
  }
  .picker{
    overflow-x: hidden;
    overflow: visible;
    width: 100%;
    height: 400px;
  }
  .picker-items{
    z-index:555;
    float: inherit;
    position: fixed;
    bottom:0;
    /*<!--top:-400px;-->*/
    width: 100%;
    /*height: 400px;*/
    background-color: #fff;
  }
  /*.mt-header {*/
    /*background: black;*/
    /*height: 80px;*/
  /*}*/
  .birthday {
    border-bottom: 1px solid #f4f4f4;
    input::-webkit-input-placeholder {
      font-size: 50px;
    }
    width: 100%;
    .mint-cell-value {
      width: 200px;
      text-align: right;
      padding-right: 0;
    }
    .mint-field-core {
      background-color: #fff;
      margin-right: -40px;
      box-sizing: border-box;
      padding-left: 150px;
      padding-right: 0;
      text-align: right;
      width: 200px;
      height: 90px;
    }
  }

  a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    outline: none;
  }

  .yi {
    border-bottom: 1px solid #f4f4f4;
    .mint-cell {
      height: 112px;
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 30px;
      .mint-field-core{
        background-color: #fff;
      }
      .mint-field-other {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .mint-cell-wrapper {
        font-size: 26px;
      }
    }
  }

  .er {
    margin-top: 20px;
    .mint-cell {
      height: 94px;
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 20px;
    }
    .mint-field-core {
      text-align: right;
      box-sizing: border-box;
      padding-right: 18px;
      /*color: #a1a1a1;*/
      background-color: #fff;
      color: #000;
    }
    .mint-cell-wrapper {
      background-image: none;
      /*border-bottom: 1px solid #f4f4f4;*/
      font-size: 26px;
    }
  }

  .san {
    padding-top: 20px;
    > p {
      background-color: #fff;
      line-height: 94px;
      padding-left: 36px;
      padding-right: 36px;
      box-sizing: border-box;
      border-bottom: 2px solid #f1f1f1;
      /*margin-top: 20px;*/
      width: 100%;
      height: 94px;
      font-size: 26px;
      > img {
        margin-top: 24px;
        float: right;
        width: 48px;
        height: 48px;
      }
      > span {
        float: right;
        /*padding-right: 20px;*/
      }
    }
  }

  .si {
    > p {
      background-color: #fff;
      line-height: 94px;
      padding-left: 36px;
      padding-right: 36px;
      box-sizing: border-box;
      border-bottom: 2px solid #f1f1f1;
      /*margin-top: 20px;*/
      width: 100%;
      height: 94px;
      font-size: 26px;
      > span {
        float: right;
      }
    }
    margin-top: 20px;
  }
  /*#canvas{*/
    /*width: 307px!important;*/
    /*height: 307px!important;*/
    /*margin:0 auto 0 !important;*/
    /*margin-left: 14px !important;*/
    /*border: none;*/
  /*}*/






  //////////////////

  .tx{
    width: 120px;
    height: 100px;
    float: left;
    line-height: 80px;
    font-size: 26px;
  }
  input[type="file"]{
    position: absolute;
    float: left;
    z-index: 10000;
    opacity: 0;
    width: 100px;
    height: 100px;
  }
  #button {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 80px;
    height: 40px;
    border:none;
    border-radius: 5px;
    background:white;
  }
  .show {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    border: 1px solid #d5d5d5;
    float: right;
    margin-top: -15px;
  }
  .picture{
    position: absolute;
    z-index: 9;
    float: left;
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    border: 1px solid #d5d5d5;
  }

  .container {
    z-index: 99;
    position: fixed;
    padding-top: 60px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background:rgba(0,0,0,1);
  }

  #image {
    max-width: 100%;
  }

  .cropper-view-box,.cropper-face {
    border-radius: 50%;
  }


  .cropper-container {
    font-size: 0;
    line-height: 0;

    position: relative;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    direction: ltr;
    -ms-touch-action: none;
    touch-action: none
  }

  .cropper-container img {
    /* Avoid margin top issue (Occur only when margin-top <= -height) */
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    height: 100%;
    image-orientation: 0deg
  }

  .cropper-wrap-box,
  .cropper-canvas,
  .cropper-drag-box,
  .cropper-crop-box,
  .cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .cropper-wrap-box {
    overflow: hidden;
  }

  .cropper-drag-box {
    opacity: 0;
    background-color: #fff;
  }

  .cropper-modal {
    opacity: .5;
    background-color: #000;
  }

  .cropper-view-box {
    display: block;
    overflow: hidden;

    width: 100%;
    height: 100%;

    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
  }

  .cropper-dashed {
    position: absolute;

    display: block;

    opacity: .5;
    border: 0 dashed #eee
  }

  .cropper-dashed.dashed-h {
    top: 33.33333%;
    left: 0;
    width: 100%;
    height: 33.33333%;
    border-top-width: 1px;
    border-bottom-width: 1px
  }

  .cropper-dashed.dashed-v {
    top: 0;
    left: 33.33333%;
    width: 33.33333%;
    height: 100%;
    border-right-width: 1px;
    border-left-width: 1px
  }

  .cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;

    width: 0;
    height: 0;

    opacity: .75
  }

  .cropper-center:before,
  .cropper-center:after {
    position: absolute;
    display: block;
    content: ' ';
    background-color: #eee
  }

  .cropper-center:before {
    top: 0;
    left: -3px;
    width: 7px;
    height: 1px
  }

  .cropper-center:after {
    top: -3px;
    left: 0;
    width: 1px;
    height: 7px
  }

  .cropper-face,
  .cropper-line,
  .cropper-point {
    position: absolute;

    display: block;

    width: 100%;
    height: 100%;

    opacity: .1;
  }

  .cropper-face {
    top: 0;
    left: 0;

    background-color: #fff;
  }

  .cropper-line {
    background-color: #39f
  }

  .cropper-line.line-e {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize
  }

  .cropper-line.line-n {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize
  }

  .cropper-line.line-w {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize
  }

  .cropper-line.line-s {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize
  }

  .cropper-point {
    width: 5px;
    height: 5px;

    opacity: .75;
    background-color: #39f
  }

  .cropper-point.point-e {
    top: 50%;
    right: -3px;
    margin-top: -3px;
    cursor: e-resize
  }

  .cropper-point.point-n {
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize
  }

  .cropper-point.point-w {
    top: 50%;
    left: -3px;
    margin-top: -3px;
    cursor: w-resize
  }

  .cropper-point.point-s {
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize
  }

  .cropper-point.point-ne {
    top: -3px;
    right: -3px;
    cursor: ne-resize
  }

  .cropper-point.point-nw {
    top: -3px;
    left: -3px;
    cursor: nw-resize
  }

  .cropper-point.point-sw {
    bottom: -3px;
    left: -3px;
    cursor: sw-resize
  }

  .cropper-point.point-se {
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    opacity: 1
  }

  @media (min-width: 768px) {

    .cropper-point.point-se {
      width: 15px;
      height: 15px
    }
  }

  @media (min-width: 992px) {

    .cropper-point.point-se {
      width: 10px;
      height: 10px
    }
  }

  @media (min-width: 1200px) {

    .cropper-point.point-se {
      width: 5px;
      height: 5px;
      opacity: .75
    }
  }

  .cropper-point.point-se:before {
    position: absolute;
    right: -50%;
    bottom: -50%;
    display: block;
    width: 200%;
    height: 200%;
    content: ' ';
    opacity: 0;
    background-color: #39f
  }

  .cropper-invisible {
    opacity: 0;
  }

  .cropper-bg {
    background-image: url('');
  }

  .cropper-hide {
    position: absolute;

    display: block;

    width: 0;
    height: 0;
  }

  .cropper-hidden {
    display: none !important;
  }

  .cropper-move {
    cursor: move;
  }

  .cropper-crop {
    cursor: crosshair;
  }

  .cropper-disabled .cropper-drag-box,
  .cropper-disabled .cropper-face,
  .cropper-disabled .cropper-line,
  .cropper-disabled .cropper-point {
    cursor: not-allowed;
  }

</style>
